<template>
	<view class="container">
		<!-- 头像 -->
		<view class="top" @click="uploadImage">
			<image class="picture" :src="`https://wndz.dev.jiangkukeji.cn/${userInfor.avatar}`" mode="aspectFill">
			</image>
			<image class="position" src="@/static/myimg/a7.png"></image>
		</view>
		<!-- 主体 -->
		<view class="bottom">
			<!-- 列表 -->
			<view class="list">
				<view class="title">
					<text style="font-size: 32rpx">昵称</text>
				</view>
				<view class="upload" @click="chaneName(1)">
					<text class="text">{{ userInfor.nickname }}</text>
					<image src="../../static/myimg/a6.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="title">
					<text style="font-size: 32rpx">地区</text>
				</view>
				<view class="upload" @click="$refs.popup.open()">
					<text
						class="text">{{ currentcity ? currentcity : `${userInfor.province}·${userInfor.citys ? userInfor.citys.split('市')[0] : ''}` }}</text>
					<image src="../../static/myimg/a6.png"></image>
				</view>
			</view>
			<view class="list">
				<view class="title">
					<text style="font-size: 32rpx">出生年月</text>
				</view>
				<view class="upload" @click="err">
					<text class="text">{{ userInfor.birthday || '' }}</text>
				</view>
			</view>
			<view class="list">
				<view class="title">
					<text style="font-size: 32rpx">性别</text>
				</view>
				<view class="upload" @click="err">
					<text class="text">{{ userInfor.gender == 1 ? '男' : '女' }}</text>
				</view>
			</view>
			<view class="list">
				<view class="title">
					<text style="font-size: 32rpx">交换微信</text>
				</view>
				<view class="upload" @click="chaneName(2)">
					<text class="text">{{ userInfor.wechat ? userInfor.wechat : '请填写' }}</text>
					<image src="../../static/myimg/a6.png"></image>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<veiw class="header">
					<view style="color: #afa6ab" @click="$refs.popup.close()">取消</view>
					<view style="font-size: 30rpx; color: #1d202c; font-weight: 800">选择你居住的城市</view>
					<view style="color: #26a089" @click="savedate">确定</view>
				</veiw>
				<!-- 选择器 -->
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in province" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in city[0].children" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		infor,
		profile,
		getCityList
	} from '@/utils/my.js';
	import {
		uploadFile
	} from '@/common/util.js';
	export default {
		data() {
			return {
				userInfor: '', // 用户信息
				picture: '',
				provinceidnex: 0,
				province: [],
				value: [0, 1],
				cityindex: 0,
				indicatorStyle: `height: 50px;`,
				currentcity: ''
			};
		},
		computed: {
			city() {
				return this.province.filter((item) => {
					return item.name == this.province[this.provinceidnex].name;
				});
			}
		},
		onLoad() {
			this.getcitylist();
		},
		async onShow() {
			const res = await infor();
			this.userInfor = res.data;
			console.log('----------个人信息', this.userInfor);
		},
		methods: {
			// 获取城市列表
			async getcitylist() {
				const res = await getCityList();
				this.province = res.data;
				console.log(this.province);
			},
			// 切换
			bindChange(e) {
				// 省份的index
				console.log(e.detail.value[0]);
				this.provinceidnex = e.detail.value[0];
				this.cityindex = e.detail.value[1];
			},
			async savedate() {
				this.currentcity =
					`${this.province[this.provinceidnex].name}·${this.province[this.provinceidnex].children[this.cityindex].name}`;
				console.log(this.currentcity);
				const res = await profile({
					province: this.province[this.provinceidnex].name,
					citys: this.province[this.provinceidnex].children[this.cityindex].name
				});
				console.log('地区----', res);
				this.$refs.popup.close();
			},
			chaneName(type) {
				uni.redirectTo({
					url: `/my/selfData/component/nickname?type=${type}`
				});
			},
			err() {
				uni.showModal({
					title: '温馨提示',
					content: '不可修改',
					showCancel: false,
					confirmText: '我知道了'
				});
			},
			// 修改头像
			uploadImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '上传中'
						});
						const token = uni.getStorageSync('token');
						uni.uploadFile({
							url: 'https://wndz.dev.jiangkukeji.cn/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								token: token
							},
							success: async (uploadFileRes) => {
								let up = JSON.parse(uploadFileRes.data);
								this.picture = up.data.fullurl;
								await profile({
									avatar: up.data.url
								});
								uni.redirectTo({
									url: '/my/selfData/selfData'
								});
								uni.hideLoading();
							}
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		text-align: center;
	}

	.container {
		padding: 30rpx;

		.top {
			width: 100%;
			text-align: center;
			position: relative;

			.picture {
				width: 122rpx;
				height: 122rpx;
				border-radius: 61rpx;
			}

			.position {
				width: 40rpx;
				height: 34rpx;
				position: absolute;
				right: 43%;
				bottom: 5rpx;
			}
		}

		.bottom {
			margin-top: 80rpx;

			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #e8e8e8;

				.title {
					height: 132rpx;
					line-height: 132rpx;
					position: relative;
				}

				.upload {
					height: 132rpx;
					line-height: 132rpx;

					.text {
						font-size: 32rpx;
						margin: 0 20rpx 0 60rpx;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
					}
				}
			}
		}

		.box {
			box-sizing: border-box;
			width: 750rpx;
			height: 800rpx;
			border-radius: 18rpx 18rpx 0rpx 0rpx;
			padding: 30rpx;
			background-color: #fff;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}
		}
	}
</style>